<template>
	<view class="demo">
		<view class="main">
			<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from "vue";

	const opts = {
		color: ["#1890FF"],
		padding: [10],
		title: {
			name: "16分",
			fontSize: 25,
			color: "#2fc25b",
			offsetY: 20
		},
		subtitle: {
			name: "",
			fontSize: 15,
			color: "#666666",
			offsetY: -50
		},
		extra: {
			gauge: {
				type: "default",
				width: 30,
				labelColor: "#666666",
				startAngle: 1,
				endAngle: 0,
				startNumber: 0,
				endNumber: 40,
				labelFormat: "",
				splitLine: {
					fixRadius: 0,
					splitNumber: 4,
					width: 30,
					color: "#FFFFFF",
					childNumber: 5,
					childWidth: 12
				},
				pointer: {
					width: 10,
					color: "auto"
				}
			}
		}
	};
	const chartData = {
		categories: [{
			"value": 0.2,
			"color": "#1890ff"
		}, {
			"value": 0.8,
			"color": "#2fc25b"
		}, {
			"value": 1,
			"color": "#f04864"
		}],
		series: [{
			name: "完成率",
			data: 0.4
		}]
	}
</script>
<style lang="scss">
	.demo {
		width: 100%;
		display: flex;
		justify-content: center;

		.main {
			width: 600rpx;
			height: 400rpx;
		}
	}
</style>